import React from 'react';
import {
  View,
  ScrollView,
  TouchableOpacity,
  Platform,
  Alert,
} from 'react-native';
import {Text, Button, ListItem} from '@rneui/base';
import {
  useMap,
  useMount,
  useSafeState,
  useSetState,
  useUpdateEffect,
} from 'ahooks';
import {round} from 'lodash';
import style from './style.less';
import {useNavigation} from '@react-navigation/native';
import {FileSaveDirName} from '@/config/common';
import dayjs from 'dayjs';
import CheckComPowers from '@/components/CheckComPowers';
import ImagePicker from 'react-native-image-crop-picker';
import {Dirs, FileSystem} from 'react-native-file-access';
import RNFS from 'react-native-fs';
import * as RNPath from 'react-native-path';
import * as PageSvg from './svg';
import {IconColor} from '../../../../config';
import SetSort from './SetSort';
import ToggleList from './ToggleList';

export {default as config} from './config';
export default props => {
  const navigation = useNavigation();
  useMount(() => {
    navigation.setOptions({
      headerTitleAlign: 'left',
      headerRight: () => (
        <>
          <TouchableOpacity>
            <PageSvg.Search width={40} color={IconColor} />
          </TouchableOpacity>
        </>
      ),
    });
  });

  const [showListIconKey, setShowListIconKey] = useSafeState('List');

  return (
    <View style={style.box}>
      <View style={style.dirNav}>
        <Text>dirNav</Text>
      </View>
      <View style={style.tools}>
        <TouchableOpacity>
          <PageSvg.FolderAdd width={30} height={30} color={IconColor} />
        </TouchableOpacity>
        <SetSort />
        <ToggleList
          iconKey={showListIconKey}
          onChangeIconKey={setShowListIconKey}
        />
      </View>
      <ScrollView style={style.content}>
        {new Array(50).fill().map((item, index) => (
          <Text key={index}>{index + 1}</Text>
        ))}
      </ScrollView>
    </View>
  );
};
